<!DOCTYPE html>
<html style="background-color: #F2F2F2;">
<head>

	<title><?php echo _PLATFORM_TITLE_; ?></title>

	<?php $this->setFlag('vue,lazyload,wxshare'); ?>
	<?php $this->import('meta'); ?>

	<link rel="stylesheet" type="text/css" href="html/platformwap/electronic/css/list.css?v=12" />

    <script type="text/javascript" src="html/platformwap/electronic/js/list.js?v=14"></script>
	
</head>
<body>

	<div style="display: none;"></div>
	<div id="loadSpin" class="bg"></div>

	<div id="mainBg" class="bg" style="display: none;">

		<input type="text" id="from" class="display-none" />
		<input type="text" id="areaInfo" class="display-none" />
        <input type="text" id="categoryInfo" class="display-none" />
        <input type="text" id="featureInfo" class="display-none" />

        <div class="condition-bar">
        	<div class="title-bar">
				<img class="left-img" src="static/pic/wap/home.png" onclick="toHome()" />
	            <div class="title">家电维修</div>
	            <img class="right-img" src="static/pic/wap/search.png" onclick="openSlipSearchDiv()" />
	        </div>

			<div class="option-bar">
				<div class="option-item" onclick="showOption('1')">
                    <span id="optionItemText1" class="option-item-text">区域</span>
                    <span><img id="optionItemimg1" src="static/pic/wap/option_down.png" class="option-item-img" /></span>
                </div>
                <div class="option-item" onclick="showOption('2')">
                    <span id="optionItemText2" class="option-item-text">类别</span>
                    <span><img id="optionItemimg2" src="static/pic/wap/option_down.png" class="option-item-img" /></span>
                </div>
                <div class="option-item" onclick="showOption('3')">
                    <span id="optionItemText3" class="option-item-text">特征</span>
                    <span><img id="optionItemimg3" src="static/pic/wap/option_down.png" class="option-item-img" /></span>
                </div>
			</div>
		</div>
		<div class="empty-area"></div>

		<div class="count-bar">
			共 <span id="listCount" class="count-color">X</span> 条信息
		</div>

        <div id="listBar">
            <div v-bind:id="'electronicInfo' + info.electronicid" v-for="info in list">
                <div class="list-bar" v-on:click="viewElectronic(info.electronicid)">
                    <div class="list-text">
                        <div class="list-title-bar">
                            <div class="list-title">{{ info.title }}</div>
                        </div>
                        <div class="list-area">{{ info.area }}</div>
                        <div class="list-feature-bar">
                            <div class="list-feature" v-for="feature in info.feature">{{ feature }}</div>
                        </div>
                    </div>
                    <div class="list-pic">
                        <template v-if="info.istop == 1">
                            <img class="list-hot" src="static/pic/wap/hot.png" />
                        </template>
                        <img class="list-logo" v-lazy="info.smallpic" />
                        <div class="list-time">{{ info.difftime }}</div>
                    </div>
                </div>
                <div class="list-separate"></div>
            </div>
        </div>

		<?php $this->import('page'); ?>
		<?php $this->import('totop'); ?>
		<?php $this->import('slipoption'); ?>
		<?php $this->import('slipsearch'); ?>



		<div id="optionItemFloatDiv1" class="option-item-float-div1" style="display: none;">
        	<div class="select-item" onclick="selectOption(this, '', 'areaInfo', '区域')">
                <div class="select-text-click">不限区域</div>
                <img class="select-img" src="static/pic/wap/option_click.png" />
            </div>
            <div class="select-item" onclick="selectOption(this, '海城区', 'areaInfo', '海城区')">
                <div class="select-text">海城区</div>
                <img class="select-img" src="static/pic/wap/option_click.png" style="display: none;" />
            </div>
            <div class="select-item" onclick="selectOption(this, '银海区', 'areaInfo', '银海区')">
                <div class="select-text">银海区</div>
                <img class="select-img" src="static/pic/wap/option_click.png" style="display: none;" />
            </div>
            <div class="select-item" onclick="selectOption(this, '铁山港区', 'areaInfo', '铁山港区')">
                <div class="select-text">铁山港区</div>
                <img class="select-img" src="static/pic/wap/option_click.png" style="display: none;" />
            </div>
            <div class="select-item" onclick="selectOption(this, '合浦县', 'areaInfo', '合浦县')">
                <div class="select-text">合浦县</div>
                <img class="select-img" src="static/pic/wap/option_click.png" style="display: none;" />
            </div>
        </div>

        <div id="optionItemFloatDiv2" class="option-item-float-div2" style="display: none;">
        	<div class="h22">
                <div id="categoryListDiv">
                    <div class="option-select" onclick="selectMoreOption(this, '空调维修', 'categoryInfo')">空调维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '热水器维修', 'categoryInfo')">热水器维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '洗衣机维修', 'categoryInfo')">洗衣机维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '电视机维修', 'categoryInfo')">电视机维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '冰箱维修', 'categoryInfo')">冰箱维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '油烟机维修', 'categoryInfo')">油烟机维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '燃气灶维修', 'categoryInfo')">燃气灶维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '太阳能维修', 'categoryInfo')">太阳能维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '冷库维修', 'categoryInfo')">冷库维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '麻将机维修', 'categoryInfo')">麻将机维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '变频器维修', 'categoryInfo')">变频器维修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '其他', 'categoryInfo')">其他</div>
                </div>
        	</div>
        	<div class="option-button-bar">
                <div class="option-button" onclick="resetCategory(this)">清除</div>
                <div class="option-button1" onclick="saveCategory()">确定</div>
            </div>
        </div>

        <div id="optionItemFloatDiv3" class="option-item-float-div3" style="display: none;">
        	<div class="h22">
                <div id="featureListDiv">
                    <div class="option-select" onclick="selectMoreOption(this, '快速上门', 'featureInfo')">快速上门</div>
                    <div class="option-select" onclick="selectMoreOption(this, '开具发票', 'featureInfo')">开具发票</div>
                    <div class="option-select" onclick="selectMoreOption(this, '售后保修', 'featureInfo')">售后保修</div>
                    <div class="option-select" onclick="selectMoreOption(this, '假日不休', 'featureInfo')">假日不休</div>
                    <div class="option-select" onclick="selectMoreOption(this, '修好收费', 'featureInfo')">修好收费</div>
                    <div class="option-select" onclick="selectMoreOption(this, '24H服务', 'featureInfo')">24H服务</div>
                    <div class="option-select" onclick="selectMoreOption(this, '免费上门', 'featureInfo')">免费上门</div>
                </div>
        	</div>
        	<div class="option-button-bar">
                <div class="option-button" onclick="resetFeature(this)">清除</div>
                <div class="option-button1" onclick="saveFeature()">确定</div>
            </div>
        </div>

        <script type="text/javascript">
            var electronic = new Vue({
                el: '#listBar',
                data: {
                    list: ''
                },
	            mounted() {
	            	Vue.use(VueLazyload);
	            },
	            watch: {
                    list() {
                        this.$nextTick(() => {
                            if (getStorage('electronic_id') != null && getStorage('electronic_id') != '') {
                                location.href = '#electronicInfo' + getStorage('electronic_id');

                                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                                window.scrollTo(0, scrollTop - 180);

                                //重新将 storage 赋值给 input 元素
                                setValue('page', getStorage('electronic_page'));
                                setValue('areaInfo', getStorage('electronic_areaInfo'));
                                setValue('categoryInfo', getStorage('electronic_categoryInfo'));
                                setValue('featureInfo', getStorage('electronic_featureInfo'));
                                setValue('searchKeyword', getStorage('electronic_searchKeyword'));

                                //重置条件选项
                                resetOption();
                            }

                            setStorage('electronic_id', '');
                            setStorage('electronic_page', '');
                            setStorage('electronic_areaInfo', '');
                            setStorage('electronic_categoryInfo', '');
                            setStorage('electronic_featureInfo', '');
                            setStorage('electronic_searchKeyword', '');
                        })
                    }
                }
            });
        </script>

	</div>

</body>
</html>